<template>
	<view>
		<view class="grid_box">
			<view class="grid_item" v-for="(item,index) in gridList" :key="index" :style="{width:itemWidth}">
				<view class="icon_box" @click="iconClick(item,index)">
					<image :src="item.imgIcon" mode=""></image>
					<view class="dian" v-if="item.badge" style="backgroundColor:#f50000"></view>
				</view>
				<view class="name">
					<text >{{item.name || ""}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "sxl_grid",
		props: {
			/* 组件配置*/
			gridList: {
				type: Array,
				default: []
			},
			/* 用来设置一行显示几项 可根据父级容器宽度设置 默认一行3个 */
			row: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {};
		},
		methods: {
			iconClick(gridItem, index) {
				this.$emit("iconClick", gridItem, index)
			}
		},
		computed: {
			itemWidth() {
				return 100 / this.row + "%"
			},

		}
	}
</script>

<style lang="scss">
	/* 主体样式 */
	.grid_box {
		width: 100%;
		margin: 10rpx;
		display: flex;
		flex-wrap: wrap;

		.grid_item {
			text-align: center;
			margin-top: 20px;

			.icon_box {
				position: relative;
				width: 50px;
				height: 50px;
				margin: 5px auto;
				box-shadow: 3px 3px 7px #bebebe,
					-3px -3px 7px #ffffff;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 60%;
					height: 60%;
				}

				transition: all .5s;

				&:active {
					background-color: #ccc;
					box-shadow: none;
				}

				.dian {
					position: absolute;
					top: 5px;
					right: 5px;
					width: 5px;
					height: 5px;
					border-radius: 50%;
				}
			}

			.name {
				text-shadow: 1px 1px 1px #000;
				color: #FFFFFF;
				font-size: 30upx;
			}
		}
	}
</style>
